<template>
  <div class="wocarea">
    <div class="letingon">
      <div
        v-for="(item, index) in eacleftdata.devparastructs"
        :key="index"
        style="margin-bottom: 10px; display: flex; align-items: center"
        :class="item.paraName == eacdata.paraName ? 'dqd' : ''"
        @click="
          opfumn(
            {
              DevID: item.devId,
              ParaNo1: item.paraNo1,
              ParaType: item.paraType,
            },
            item
          )
        "
      >
        <img :src="item.img" alt="" width="25px" />
        <div style="margin-left: 10px">
          {{ item.paraName }}
        </div>
      </div>
    </div>
    <div class="tiogna">
      <div
        style="
          width: 100%;
          margin-bottom: 20px;
          display: flex;
          justify-content: space-between;
        "
      >
        <div style="font-size: 18px; font-weight: 600">
          {{ eacdata.paraName }} 历史记录
        </div>
        <div style="color: #1890ff" @click="fanhui()">《 返回</div>
      </div>
      <div style="border: 1px solid #aaa; width: 100%; padding: 20px">
        <div style="display: flex; justify-content: space-between">
          <div style="display: flex; justify-content: space-between">
            <div
              class="hssn"
              :class="danq == index ? 'konodioda' : ''"
              v-for="(item, index) in zuijxz"
              :key="index"
              @click="qieh(index)"
            >
              {{ item.name }}
            </div>
          </div>
          <div class="xztsmd">
            单位({{ eacdata.sign }})

            <!-- <div @click="dt">点形图</div> -->
          </div>
        </div>
        <div id="main" style="width: 100%; height: 400px"></div>
        <div style="display: flex; justify-content: space-between">
          <div></div>
          <div class="xztsmd">
            <div @click="zt" :class="smy == 'zt' ? 'dqsmy' : ''">柱形图</div>
            <div @click="xt" :class="smy == 'xt' ? 'dqsmy' : ''">折线图</div>

            <!-- <div @click="dt">点形图</div> -->
          </div>
        </div>
      </div>
    </div>
  </div>
</template>
<script>
import { logdata } from "@/api/system/imei";
import * as echarts from "echarts";
export default {
  data() {
    return {
      eacdata: {},
      eacleftdata: {},
      namexz: [],
      paraValue: [],
      smy: "zt",
      danq: 0,
      zuijxz: [
        {
          name: "最近一天",
          value: 1,
        },
        {
          name: "最近七天",
          value: 7,
        },
        {
          name: "最近一月",
          value: 30,
        },
        {
          name: "最近一年",
          value: 365,
        },
      ],
      dataData : {}
    };
  },
  methods: {
    init(data, ite, item) {
    
      this.eacleftdata = item;
      console.log(312, this.eacleftdata);
      this.opfumn(data, ite);
    },
    qieh(index) {
      this.danq = index;
      this.opfumn(this.dataData,this.eacdata)
    },
    opfumn(data, item) {
      this.eacdata = item;
      console.log('adasd',item);
      this.namexz = [];
      this.paraValue = [];
      data.day = this.zuijxz[this.danq].value;
      this.dataData = data
     
      logdata(this.dataData).then((res) => {
        console.log(res.rows);
        res.rows.forEach((item, index) => {
          this.namexz.push(item.SubmitTime);
          this.paraValue.push(item.paraValue);
        });
        this.zt();
      });
    },
    zt() {
      this.smy = "zt";
      var chartDom = document.getElementById("main");
      var myChart = echarts.init(chartDom);
      var option;

      option = {
        xAxis: {
          type: "category",
          data: this.namexz,
        },
        yAxis: {
          type: "value",
        },
        series: [
          {
            data: this.paraValue,
            type: "bar",
          },
        ],
      };

      option && myChart.setOption(option);
    },
    xt() {
      this.smy = "xt";
      var chartDom = document.getElementById("main");
      var myChart = echarts.init(chartDom);
      var option;

      option = {
        xAxis: {
          type: "category",
          data: this.namexz,
        },
        tooltip: {
          trigger: "axis",
        },
        yAxis: {
          type: "value",
        },
        series: [
          {
            data: this.paraValue,
            type: "line",
            smooth: true,
          },
        ],
      };

      option && myChart.setOption(option);
    },

    fanhui() {
      this.$emit("fanhui");
    },
  },
};
</script>
<style>
.wocarea {
  /* background: #fff; */
  height: calc(100vh - 50px);
  margin-left: -5px;
  margin-right: -5px;
  display: flex;
  justify-content: space-between;
}
.tiogna {
  width: 84%;
  background: #fff;
  height: calc(100vh - 50px);
  padding: 20px;
}
.letingon {
  width: 15%;
  background: #fff;
  height: calc(100vh - 50px);
  padding: 20px;
}
.dqd {
  color: #1890ff;
}
.xztsmd {
  display: flex;
}
.xztsmd div {
  margin-left: 10px;
}
.dqsmy {
  color: #1890ff;
}
.hssn {
  padding: 5px 20px;
  border-radius: 5px;
  border: 1px solid #aaa;
  color: #aaa;
  margin-right: 10px;
}
.konodioda {
  border: 1px solid #1890ff;
  color: #1890ff  ;
}
</style>